<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="utf-8">
		<title>BhSyVideo</title>
		<link rel="stylesheet" th:href="@{/bootstrap/css/bootstrap.min.css}" />
		<link rel="stylesheet" th:href="@{/css/BMain.css}" />
	</head>
	<body>
		<div class="container-fluid bmTopDiv">
			<div class="col-md-1 bmTopLogoFont">
				<h3>BhSyVideo</h3>
			</div>
			<div class="col-md-8 bmTopXxDiv">
				<ul class="">
					<li class="bmToplif">首页</li>
					<a th:href="@{/bhsy/BColumn}">
						<li class="bmToplif">专栏</li>
					</a>

					<a href="/ship/null/1">
					<li class="bmToplif">视频</li>
					</a>
					<a th:href="@{/bhsy/zl}">
						<li class="bmToplif">投稿</li>
					</a>
					<a th:href="@{/bhsy/byShop}">
						<li class="bmToplif">会员购</li>
					</a>
					<a th:if="${bUId==1}" th:href="@{/bhsy/Bcontroller}">
						<li class="bmToplif">管理</li>
					</a>
					<a th:href="@{/bhsy/byVip}">
						<li class="bmToplif">大会员</li>
					</a>
					<a th:href="@{/bhsy/zhiBoH}">
						<li class="bmToplif">直播间</li>
					</a>
				</ul>
			</div>
			<div class="buserCtrDiv">
				<a th:href="@{/bhsy/bMyself}">
					<img class="buserImg" th:src="${locUser.UImg}">
				</a>
				<p class="buserDt">动态</p>
				<p class="buserJl">历史记录</p>
			</div>
		</div>
		<div class="bmAllRoit">
			<div class="RoitTopImg">
				<img th:src="@{/images/RIOTimg01.jpg}" />
			</div>
			<div class="RoitCenterImg">
				<img th:src="@{/images/RIOTimg02.png}" />
			</div>
			<div class="RoitJinxImg">
				<img th:src="@{/images/RIOTimg03.png}" />
			</div>
			<div class="RoitButtomImg">
				<img th:src="@{/images/RIOTimg04.png}" />
			</div>
		</div>
	</body>
	<script th:src="@{/js/jquery-360.min.js}"></script>
	<script>
	var en;
	var newEn;
	var fliterCb=0;
	var newCbEn=0;
	var indexY=0;
	var jinxIndex=0;
		$(function(){
			$(".bmAllRoit").mousemove(function(e){
				en= (e||window.event).pageY
				if(en>85){
					newEn =(85-en)/5;
					indexY+=newEn;
					console.log(newEn)
					$(".RoitJinxImg").css("transform","translateY("+newEn+"px)");
					$(".RoitJinxImg").css("transition","0s");
					
					newCbEn = (en-85)/7;
					$(".RoitCenterImg").css("transform","translateY("+newCbEn+"px)").css("filter","grayscale("+newCbEn+"%)");
					$(".RoitCenterImg").css("transition","0s");
					newCbEn = (en-85)/8;
					$(".RoitTopImg").css("transform","translateY("+newCbEn+"px)").css("filter","grayscale("+newCbEn+"%)");
					$(".RoitTopImg").css("transition","0s");
				}
			})
			$(".bmAllRoit").mouseleave(function(){
				$(".RoitJinxImg").css("transform","translateY(0px)");
				$(".RoitJinxImg").css("transition","2s");
				
				$(".RoitCenterImg").css("transform","translateY(0px)").css("filter","grayscale(0%)");
				$(".RoitCenterImg").css("transition","2s");
				
				$(".RoitTopImg").css("transform","translateY(0px)").css("filter","grayscale(0%)");
				$(".RoitTopImg").css("transition","2s");
			})
		})
	</script>
</html>
